<template>
    <div class="m_top_bg">
        <div class="top">
            <div class="m_logo">
                <a href="#" @click.prevent="toIndex()">
                    <img src="@/assets/images/logo1.png" />
                </a>
            </div>
            <div class="m_search">
                <form>
                    <input type="text" value="" class="m_ipt" />
                    <input type="submit" value="搜索" class="m_btn" />
                </form>
                <span class="fl">
                    <a href="#">咖啡</a>
                    <a href="#">iphone 6S</a>
                    <a href="#">新鲜美食</a>
                    <a href="#">蛋糕</a>
                    <a href="#">日用品</a>
                    <a href="#">连衣裙</a>
                </span>
            </div>
            <div class="i_car" @mouseenter="getAllBuyCar(1, 5)">
                <div class="car_t">购物车 [ <span>{{ pageInfo.list.length }}</span> ]</div>
                <div class="car_bg">
                    <!--Begin 购物车未登录 Begin-->
                    <div class="un_login" v-if="userId == null || userId == ''">
                        还未登录！<a href="#" @click.prevent="toLogin()" style="color: #ff4e00">马上登录</a>
                        查看购物车！
                    </div>
                    <div class="un_login"
                        v-if="userId != null && userId != '' && (pageInfo.list.length == 0 || pageInfo.list == null)">
                        购物车空空如也！<a href="#" @click.prevent="toIndex()" style="color: #ff4e00">去添加喜欢的商品吧！</a>
                    </div>
                    <!--End 购物车未登录 End-->
                    <!--Begin 购物车已登录 Begin-->
                    <ul class="cars" v-if="pageInfo.list.length != 0 && pageInfo.list != null">
                        <li v-for="buyCar in pageInfo.list" :key="buyCar.id">
                            <div class="img">
                                <a href="#"><img
                                        :src="'http://192.168.144.183:9090/easybuyImages/' + buyCar.product.fileName"
                                        width="58" height="58" /></a>
                            </div>
                            <div class="name">
                                <a href="#">{{ buyCar.product.name }}</a>
                            </div>
                            <div class="price">
                                <font color="#ff4e00">￥{{ buyCar.product.price }}</font> X{{ buyCar.number }}
                            </div>
                        </li>
                    </ul>
                    <div class="price_sum" v-if="pageInfo.list.length != 0 && pageInfo.list != null">
                        共计&nbsp; <font color="#ff4e00">￥</font><span>{{ getTotalPrice() }}</span>
                    </div>
                    <div class="price_a" v-if="pageInfo.list.length != 0 && pageInfo.list != null">
                        <a href="#" @click.prevent="toBuyCar()">去购物车结算</a>
                    </div>
                    <!--End 购物车已登录 End-->
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'MemberSearch',
    data() {
        return {
            userId: '',
            pageInfo: '',
            buyCarList: []
        }
    },
    methods: {
        toIndex() {
            if (!(this.$route.path === '/')) {
                this.$router.push({ name: 'index' })
            }
        },
        toLogin() {
            this.$router.push('/login')
        },
        toBuyCar() {
            this.$router.push('/buycar')
        },
        searchProduct() {
            this.$router.push({ name: 'search' }).catch(() => { });
        },
        getAllBuyCar(pageNum, pageSize) {
            this.$axios({
                url: 'selectBuyCarByPage',
                method: 'post',
                data: {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    userId: this.userId
                },
                headers: {
                    'content-type': 'application/json'
                }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == '5200') {
                    this.pageInfo = rs.data.pageInfo
                    console.log(this.pageInfo)
                    console.log(this.pageInfo.list.length)
                    this.getBuyCars()
                }
            })
        },
        getTotalPrice() {
            this.totalPrice = 0;
            for (let buyCar of this.buyCarList) {
                let count = buyCar.number * buyCar.product.price
                this.totalPrice = this.totalPrice + count
            }
            return this.totalPrice.toFixed(2)
        },
        getBuyCars() {
            this.$axios({
                url: 'selectAllBuyCar',
                params: {
                    userId: this.userId
                }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == '5200') {
                    this.buyCarList = rs.data.allBuyCar
                }
            })
        }
    },
    mounted() {
        this.userId = window.sessionStorage.getItem('userId')
        this.getAllBuyCar(1, 5)
        this.getBuyCars()
    }
}
</script>
